<template>
<div class="com-school-pie">
  <div class="title fr jc">每日学校人员占比统计</div>
  <div class="chart" ref="chart"></div>
</div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'com-school-pie',
  props: ['chartData'],
  data () {
    return {
      chart: null
    }
  },
  methods: {
    setOption () {
      const types = {
        1: '学生',
        2: '职工',
        3: '访客'
      }
      const data = [...this.chartData].sort((a, b) => a.textname - b.textname).map(v => {
        return {
          name: types[v.textname],
          value: v.leijicount
        }
      })
      this.chart.setOption({
        color: ['#25CDE7', '#21CD7F', '#E7A525'],
        textStyle: {
          fontFamily: 'PingFangSC-Regular'
        },
        legend: {
          orient: 'vertical',
          right: 150,
          top: 'center',
          itemGap: 42,
          icon: 'rect',
          itemWidth: 32,
          itemHeight: 32,
          textStyle: {
            color: 'rgba(255, 255, 255, .8)',
            fontSize: 32,
            padding: [5, 5, 5, 20]
          }
        },
        series: [
          {
            name: '每日学校人员占比',
            type: 'pie',
            radius: [86, 110],
            center: [270, 162],
            data,
            label: {
              show: false,
              position: 'center',
              fontSize: 40,
              precision: 0,
              formatter (params) {
                return `{perVal|${params.percent.toFixed(0)}}{per|%}\n{text|${params.name}}`
              },
              rich: {
                perVal: {
                  fontSize: 60,
                  fontWeight: 'bold'
                },
                per: {
                  fontSize: 40,
                  verticalAlign: 'bottom'
                },
                text: {
                  fontSize: 28,
                  color: '#fff',
                  verticalAlign: 'bottom',
                  height: 38
                }
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      })
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    this.setOption()
  },
  watch: {
    chartData () {
      this.setOption()
    }
  }
}
</script>

<style lang="less">
.com-school-pie {width: 920px;height: 410px;border: 4px solid #0BFFFE;
  .title {width: 100%; height: 80px;padding-top: 14px;font: 500 40px PingFangSC-Medium;color: #FFFFFF;background: url("../../../../assets/img/p：：位图_2@2x.png") center bottom/754px 6px no-repeat;}
  .chart {width: 912px;height: 322px;}
}
</style>
